import { Suspense, lazy } from "react";
import Card from "./Card";
import { Skeleton } from "@/components/Skeleton";
/**
 * 懒加载组件
 * 使用lazy进行异步加载组件，使用Suspense包裹异步组件，fallback指定加载过程中的占位组件
 */

const LazyComponent = lazy(() => import("./LazyComponent"));

export const SuspenseDemo = () => {
  return (
    <div>
      <h1>SuspenseDemo</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
      <hr />
      <Suspense fallback={<Skeleton />}>
        <Card></Card>
      </Suspense>
    </div>
  );
};
